<template>
  <div class="app-container">
    <div class="filter-container">
      <el-date-picker
        v-model="listQuery.beginTime"
        type="month"
        class="filter-item"
        value-format="yyyy-MM"
        placeholder="选择开始月"
      />
      <el-date-picker
        v-model="listQuery.endTime"
        type="month"
        class="filter-item"
        value-format="yyyy-MM"
        placeholder="选择结束月"
      />
      <el-input
        v-model="listQuery.roomId"
        placeholder="门牌号"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <!-- 枚举类型处理 -->
      <el-select
        v-model="listQuery.isPay"
        placeholder="状态"
        clearable
        style="width: 90px"
        class="filter-item"
      >
        <el-option
          v-for="item in isPayOptions"
          :key="item.key"
          :label="item.label"
          :value="item.key"
        />
      </el-select>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        查询
      </el-button>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-download"
        @click="handleDownloadExcel"
      >
        下载账单模板
      </el-button>
      <el-upload
        ref="upload"
        class="filter-item"
        multiple
        action="string"
        :before-upload="onBeforeUploadImage"
        :http-request="UploadImage"
      >
        <el-button icon="el-icon-upload" type="primary" style="margin-left:10px;">导入账单信息</el-button>
      </el-upload>
    </div>
    <!-- 数据列表 -->
    <el-table
      :data="list.slice((page-1)*limit,page*limit)"
      style="width: 100%;text-align:center;"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        type="
      selection"
        width="55"
      />
      <el-table-column
        prop="cTime"
        label="日期"
        sortable
        width="150"
      />
      <el-table-column
        prop="roomId"
        label="门牌号"
        width="150"
      />
      <el-table-column
        label="账单"
      >
        <template slot-scope="scope">
          <el-popover
            trigger="click"
            placement="right-start"
          >
            <p>车辆管理费: {{ scope.row.carFee }}</p>
            <p>物业管理费: {{ scope.row.elFee }}</p>
            <p>当月电费: {{ scope.row.elFee }}</p>
            <p>用电度数: {{ scope.row.elDegree }}</p>
            <p>当月水费: {{ scope.row.waterFee }}</p>
            <p>用水吨数: {{ scope.row.waterTonnes }}</p>
            <p>天然气费: {{ scope.row.gasFee }}</p>
            <p>天然气用量: {{ scope.row.gasVol }}</p>
            <p>合计: {{ scope.row.total }}</p>
            <div
              slot="reference"
              class="name-wrapper"
            >
              <el-tag>合计：{{ scope.row.total }} </el-tag>
              <el-tag>点击查看详情</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="缴费状态"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.status == 0 ? '待缴费':'已缴费' }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页处理 -->
    <el-pagination
      :current-page="page"
      :page-sizes="[5, 10, 20, 40]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { uploadFiles, payMentsList } from '@/api/pay'
import waves from '@/directive/waves'
import { getToken } from '@/utils/auth'
import axios from 'axios'
const download = axios.create({
  baseURL: 'http://120.76.172.71/api/management/paymentListTemplate',
  headers: { 'Authorization': getToken() },
  methods: 'get',
  responseType: 'blob'
})
export default {
  directives: { waves },
  data() {
    return {
      // 查询条件的封装
      listQuery: {
        roomId: null,
        beginTime: null,
        endTime: null,
        isPay: null
      },
      listQueryy: {
        roomId: -1,
        beginTime: -1,
        endTime: -1,
        isPay: -1
      },
      isPayOptions: [{ label: '未缴费', key: '0' }, { label: '已缴费', key: '1' }],
      list: null,
      total: null,
      page: 1,
      limit: 10,
      multipleSelection: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取数据列表
    getList() {
      payMentsList(this.listQueryy).then(res => {
        this.list = res.data.costs
        this.total = res.data.costs.length
      })
    },
    onBeforeUploadImage(file) {
      console.log(file)
    },
    handleFilter() {
      if (this.listQuery.beginTime !== null) { this.listQueryy.beginTime = this.listQuery.beginTime } else { this.listQueryy.beginTime = -1 }
      if (this.listQuery.endTime !== null) { this.listQueryy.endTime = this.listQuery.endTime } else { this.listQueryy.endTime = -1 }
      if (this.listQuery.roomId !== null) { this.listQueryy.roomId = this.listQuery.roomId } else { this.listQueryy.roomId = -1 }
      if (this.listQuery.isPay !== null) { this.listQueryy.isPay = this.listQuery.isPay } else { this.listQueryy.isPay = -1 }
      this.page = 1
      this.getList()
    },
    // 文件提交
    UploadImage(param) {
      const fd = new FormData()
      console.log('param.file', param.file)
      fd.append('file', param.file) // 要提交给后台的文件
      uploadFiles(fd).then(res => { // UploadFiles 是封装的接口
        if (res.code !== 101) {
          this.$notify({
            title: 'Error',
            message: res.msg,
            type: 'error'
          })
        } else {
          this.$notify({
            title: 'Success',
            message: '上传成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    },
    tableRowClassName({ row }) {
      if (row.status === 0) {
        return 'warning-row'
      } else if (row.status === 1) {
        return 'success-row'
      }
      return ''
    },
    handleDownloadExcel() {
      download().then(res => {
        const url = window.URL.createObjectURL(new Blob([res.data]))
        const link = document.createElement('a')
        var myDate = new Date()
        var tYear = myDate.getFullYear()
        var tMonth = myDate.getMonth() + 1

        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', this.$route.meta.title + tYear + '-' + tMonth + '.xls')
        document.body.appendChild(link)
        console.log(res)
        link.click()
      })
    },
    handleSizeChange: function(size) {
      this.limit = size // 每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.page = currentPage // 点击第几页
    }
  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
